<template>
    <div :class="`tech-shop-after-sale ${mode}`">
        <div class="info-container">
            <ServerGoodsInfo :info="afterSaleGoods" :mode="mode" :styleMode="styleMode" :theme="theme" />
            <div :class="`detail-info-container ${mode}`">
                <TechCell v-if="isOnlyRefund" class="detail-item" label="商品状态" :value="goodsStatus" is-link @click="openSelectGoodsStatus" />
                <TechCell v-else class="detail-item refund-price" label="退货数量">
                    <div class="price-value" slot="value">
                        <CountControl size="mini" :max="afterSaleGoods.quantity - (afterSaleGoods.refund_quantity || 0)" :count="refundCount" @minus="minusCount" @add="addCount" :mode="mode" :styleMode="styleMode" :theme="theme" />
                    </div>
                </TechCell>
                <TechCell class="detail-item refund-price" label="退款金额">
                    <div class="price-value" slot="value">
                        <span class="label">￥</span>{{(afterSaleGoods.price * refundCount) / 100}}
                    </div>
                </TechCell>
                <TechCell class="detail-item" label="退款原因" :type="reason ? 'normal' : 'gray'" :value="reason ? reason : '请选择原因'" is-link @click="openSelectRefundReason" />
                <TechCell class="detail-item" label="退货备注" :type="remark ? 'normal' : 'gray'" :value="remark ? remark : '填写备注(选填)'" is-link @click="openRemarkModal" />
            </div>
        </div>
        <div class="action-container">
            <Button :style="themeBackround" :round="buttonRound" size="large" @click="apply">提交申请</Button>
        </div>
        <SelectGoodsStatus ref="status" @ensure="ensureStatus" :mode="mode" :styleMode="styleMode" :theme="theme" />
        <SelectRefundReason ref="reason" :type="afterSaleType" @ensure="ensureReason" :mode="mode" :styleMode="styleMode" :theme="theme" />
        <ServerRemark ref="remark" @ensure="ensureRemark" :defaultRemark="remark" :mode="mode" :styleMode="styleMode" :theme="theme" />
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { Button } from 'vant';
import { TechCell } from '@components/base';
import { CountControl } from '@components/shop';
import ServerGoodsInfo from './aftersale/ServerGoodsInfo';
import SelectGoodsStatus from './aftersale/SelectGoodsStatus';
import SelectRefundReason from './aftersale/SelectRefundReason';
import ServerRemark from './aftersale/ServerRemark';

import { Tip, TipLoading, ClearTip } from '@common/tip';
import { repalceTo } from '@common/utils';
import { AFTER_SALE_GOODS_STATUS_TYPE, SHOP_ORDER_AFTER_SALE_TYPE } from '@constants/shop';
import { getUiMode, getUiTheme, getUiStyleMode } from '@biztools/info';
import { DEFAULT_MODE, DEFAULT_THEME, DEFAULT_STYLE_MODE } from '@constants/style';
export default {
    name: 'AfterSaleItemApply', // 售后申请页
    components: {
        TechCell,
        Button,
        CountControl,
        ServerGoodsInfo,
        SelectGoodsStatus,
        SelectRefundReason,
        ServerRemark,
    },
    data() {
        return {
            goodsStatus: AFTER_SALE_GOODS_STATUS_TYPE[0],
            reason: '',
            remark: '',
            refundCount: 1,
            // 获取设置的配置信息
            mode: getUiMode() || DEFAULT_MODE,
            theme: getUiTheme() || DEFAULT_THEME,
            styleMode: getUiStyleMode() || DEFAULT_STYLE_MODE,
        };
    },
    computed: {
        ...mapState({
            afterSaleOrderInfo: state => state.orderDetail.afterSaleOrderInfo,
            afterSaleGoods: state => state.orderDetail.afterSaleGoods,
            afterSaleType: state => state.orderDetail.afterSaleType,
        }),
        isOnlyRefund() {
            return this.afterSaleType === SHOP_ORDER_AFTER_SALE_TYPE.onlyRefund;
        },
        buttonRound() {
            return this.styleMode === 'circle';
        },
        themeBackround() {
            return `background-color: ${this.theme};color: #FFFFFF;border: none;`;
        },
    },
    watch: {
        afterSaleGoods(val) {
            if (val) {
                this.refundCount = val.quantity - (val.refund_quantity || 0);
            }
        }
    },
    mounted() {
        this.refundCount = this.afterSaleGoods.quantity - this.afterSaleGoods.refund_quantity || 1;
    },
    methods: {
        ...mapActions([
            'applyAfterSaleService',
        ]),
        openSelectGoodsStatus() {
            this.$refs.status.show();
        },
        openSelectRefundReason() {
            this.$refs.reason.show();
        },
        openRemarkModal() {
            this.$refs.remark.show();
        },
        ensureStatus(value) {
            this.goodsStatus = value;
        },
        ensureReason(value) {
            this.reason = value;
        },
        ensureRemark(value) {
            this.remark = value;
        },
        minusCount() {
            this.refundCount -= 1;
        },
        addCount() {
            this.refundCount += 1;
        },
        ensureParam() {
            if (!this.goodsStatus) {
                Tip('请先选择商品状态');
                return false;
            }
            if (!this.reason) {
                Tip('请先选择原因');
                return false;
            }
            return true;
        },
        async apply() {
            if (this.ensureParam()) {
                TipLoading('提交申请中...');

                const { order_number } = this.afterSaleOrderInfo;
                // 单价
                const price = this.afterSaleGoods.price;
                // 退货数量
                const count = this.isOnlyRefund ? this.afterSaleGoods.quantity - this.afterSaleGoods.refund_quantity : this.refundCount;
                const param = {
                    order_number: order_number,
                    type: this.afterSaleType,
                    remark: this.remark,
                    details: [{
                        id: this.afterSaleGoods.id,
                        quantity: this.isOnlyRefund ? 0 : count,
                        amount: count * price,
                        // 缺失商品状态-产品确认这么干
                        reason: `${this.reason}${this.isOnlyRefund ? '(' + this.goodsStatus + ')' : ''}`,
                    }],
                };
                const backId = await this.applyAfterSaleService(param);
                if (backId) {
                    ClearTip();
                    repalceTo(`shop-order/after-sale/detail/${backId}`);
                }
            }
        },
    },
};
</script>

<style lang="less">
.tech-shop-after-sale {
    .p-v(@shop-bag-gap);
    min-height: calc(100vh - 2 * @shop-bag-gap);
    .mode-white();
    .flex-column();
    justify-content: space-between;
    &.white {
        background-color: @shop-bg-color;
    }
    &.black {
        background-color: @black;
        .van-cell__label {
            color: @black-title-color !important;
        }
        .tech-cell-value {
            color: @black-title-color !important;
            &.value-gray {
                color: @gray-dark !important;
            }
        }
    }
    .detail-info-container {
        .m-h(@shop-bag-gap);
        background-color: @white;
        border-radius: @border-radius;
        overflow: hidden;
        .p-v(@shop-gap);
        .mode-white();
        .detail-item {
            height: 44px;
            line-height: 44px;
            .p-h(@shop-bag-gap);
            .van-cell__label {
                font-size: @font-size;
                color: @text-color;
            }
        }
        .refund-price {
            .price-value {
                font-size: @font-size-md;
                font-weight: 500;
                line-height: 1;
                font-family: @font-family-number;
                .label {
                    .m-r(-3);
                }
            }
        }
    }
    .action-container {
        .p-h(@shop-bag-gap);
        padding-bottom: 0;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }
}
</style>
